<template>
  <el-card class="tag-info" :style="siteContentViewHeight">
    <div class="info-list">
      <div class="info-header">
        <el-row :gutter="10" class="search-header">
          <el-col :span="21">
            <el-input
              v-model="params.queryParams.tagNm"
              placeholder="输入搜索关键字"
              clearable
              @clear="clearKeywords"
              @keyup.13.native="onSearch"
            >
              <el-button slot="append" type="primary" icon="el-icon-search" @click="onSearch"></el-button>
            </el-input>
          </el-col>
          <el-col :span="3"><i class="el-icon-refresh" @click="getList"></i></el-col>
        </el-row>
        <el-row :gutter="10" class="list-filter">
          <el-col
            :span="4"
            :class="{ active: params.queryParams.intgrValInterval === '' }"
            class="type0"
            @click.native="changeFilter()"
          >
            <span></span><br />
            全部
          </el-col>
          <el-col
            :span="4"
            :class="{ active: params.queryParams.intgrValInterval === 1 }"
            class="type1"
            @click.native="changeFilter(1)"
          >
            <span></span><br />
            优秀
          </el-col>
          <el-col
            :span="4"
            :class="{ active: params.queryParams.intgrValInterval === 2 }"
            class="type2"
            @click.native="changeFilter(2)"
          >
            <span></span><br />
            良好
          </el-col>
          <el-col
            :span="4"
            :class="{ active: params.queryParams.intgrValInterval === 3 }"
            class="type3"
            @click.native="changeFilter(3)"
          >
            <span></span><br />
            一般
          </el-col>
          <el-col
            :span="4"
            :class="{ active: params.queryParams.intgrValInterval === 4 }"
            class="type4"
            @click.native="changeFilter(4)"
          >
            <span></span><br />
            严重
          </el-col>
          <el-col :span="4" class="type5" @click.native="changeSort">
            <span><i class="el-icon-sort"></i></span><br />
            排序
          </el-col>
        </el-row>
      </div>
      <ul class="info-selector tag-scrollbar">
        <li
          v-for="item in list"
          :key="item.tagId"
          :class="{ active: selectedTag.tagId === item.tagId }"
          @click="selectTag(item)"
        >
          <div>{{ item.tagNm }}</div>
          <span :class="'type' + item.intgrValInterval">
            <template v-if="item.intgrValInterval === 1">
              <icon-svg name="iconInfoCheck" class="check"></icon-svg>
            </template>
            <template v-else>
              <el-popover placement="right" trigger="hover" popper-class="info-tips" v-if="item.missingFieldTip.length">
                <ul>
                  <li v-for="(tip, index) in item.missingFieldTip.split(';')" :key="index">
                    {{ tip }}
                  </li>
                </ul>
                <icon-svg name="iconWarning" slot="reference"></icon-svg>
              </el-popover>
              <icon-svg name="iconWarning" v-else></icon-svg>
            </template>
          </span>
        </li>
      </ul>
      <el-pagination
        :current-page="params.currentPageNum"
        :page-size="params.pageSize"
        background
        layout="total, prev, pager, next"
        :total="totalSize"
        :pager-count="5"
        small
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <div class="info-content">
      <div class="content-header">
        <span class="name">
          <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="0" v-if="editable">
            <el-form-item prop="tagNm">
              <el-input placeholder="请输入标签名称" v-model="editForm.tagNm" clearable></el-input>
            </el-form-item>
          </el-form>
          <template v-else>
            {{ selectedTag.tagNm }}
          </template>
        </span>
        <div class="status">
          <img src="~@/assets/img/tag_modify.png" v-if="isModify" />
          <img src="~@/assets/img/tag_disabled.png" v-if="tagStatus === 70" />
          <el-button :type="tagStatus === 50 ? 'info' : 'primary'" size="mini" @click="toggleStatus">
            {{ tagStatus === 50 ? '停用标签' : '启用标签' }}
          </el-button>
        </div>
      </div>
      <el-tabs v-model="selectedTab" @tab-click="handleClickTab" :before-leave="beforeChange">
        <el-tab-pane label="基本信息" name="basic">
          <info-basic
            ref="basicTab"
            :tagId="selectedTag.tagId"
            :tagStatus="tagStatus"
            :isModify="isModify"
            @callback="getList(true)"
            @updateTagStatus="updateTagStatus"
            @changeEdit="changeEdit"
          ></info-basic>
        </el-tab-pane>
        <el-tab-pane label="来源表信息" name="source">
          <info-source
            ref="sourceTab"
            :tagId="selectedTag.tagId"
            :tagStatus="tagStatus"
            :isModify="isModify"
            @callback="getList(true)"
          ></info-source>
        </el-tab-pane>
        <el-tab-pane label="应用信息" name="application">
          <info-application
            ref="applicationTab"
            :tagId="selectedTag.tagId"
            :tagStatus="tagStatus"
            :isModify="isModify"
            @callback="getList(true)"
          ></info-application>
        </el-tab-pane>
        <el-tab-pane label="责任方" name="responser">
          <info-respon
            ref="responserTab"
            :tagId="selectedTag.tagId"
            :tagStatus="tagStatus"
            :isModify="isModify"
            @callback="getList(true)"
          ></info-respon>
        </el-tab-pane>
        <el-tab-pane label="变更历史" name="history">
          <info-history ref="historyTab" :tagId="selectedTag.tagId"></info-history>
        </el-tab-pane>
        <el-tab-pane label="监控信息" name="monitor">
          <info-monitor ref="monitorTab" :tagId="selectedTag.tagId"></info-monitor>
        </el-tab-pane>
      </el-tabs>
    </div>
    <info-modify-dialog ref="infoModifyDialog" @callback="confirmModify"></info-modify-dialog>
  </el-card>
</template>

<script>
import infoBasic from './information-basic'
import infoSource from './information-source'
import infoRespon from './information-responser'
import infoApplication from './information-application'
import infoHistory from './information-history'
import infoMonitor from './information-monitor'
import infoModifyDialog from './information-modify-dialog'
export default {
  components: {
    infoBasic,
    infoSource,
    infoRespon,
    infoApplication,
    infoHistory,
    infoMonitor,
    infoModifyDialog
  },
  data() {
    return {
      editable: false,
      tagStatus: 50,
      isModify: false,
      firstLoad: true,
      selectedTab: 'basic',
      selectedTag: {},
      list: [],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 15,
        queryParams: {
          intgrValInterval: '',
          tagNm: ''
        },
        descPriority: false
      },
      totalSize: 0,
      editForm: {
        tagNm: ''
      },
      editFormRules: {
        tagNm: [{ required: true, message: '标签名称不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    documentClientHeight: {
      get() {
        return this.$store.state.common.documentClientHeight
      }
    },
    siteContentViewHeight() {
      return { height: this.documentClientHeight - 90 + 'px' }
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$route.query.tagNm) {
        this.params.queryParams.tagNm = this.$route.query.tagNm
        this.selectedTab = 'monitor'
        this.getList()
      } else this.getList()
    })
  },
  watch: {
    $route() {
      this.firstLoad = true
      this.selectedTab = 'basic'
      this.selectedTag = {}
      this.params = {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 15,
        queryParams: {
          intgrValInterval: '',
          tagNm: ''
        },
        descPriority: false
      }
      this.totalSize = 0
      this.editForm.tagNm = ''
      this.getList()
    }
  },

  methods: {
    getList(updateSelect = false) {
      this.params.queryParams.tagNm = this.params.queryParams.tagNm.trim()
      let type = this.$route.meta.type
      this.$ajax({
        url: this.$ajax.setUrl(type && type === 'admin' ? 'auth/admin/astTagList' : 'ast/astTag/pageList'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.list = data.data.records
          this.totalSize = data.data.totalSize
          if (updateSelect) this.updateSelect()
          if (this.firstLoad && data.data.records.length) {
            this.selectedTag = {
              tagId: data.data.records[0].tagId,
              tagNm: data.data.records[0].tagNm,
              infoIntgrVal: data.data.records[0].infoIntgrVal,
              intgrValInterval: data.data.records[0].intgrValInterval
            }
            this.editForm.tagNm = data.data.records[0].tagNm
            this.firstLoad = false
            this.$nextTick(() => {
              this.$refs.basicTab.getDetail()
            })
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    clearKeywords() {
      this.params.queryParams.tagNm = ''
      this.onSearch()
    },
    onSearch() {
      this.params.currentPageNum = 1
      this.getList()
    },
    changeFilter(intgrValInterval = '') {
      this.params.currentPageNum = 1
      this.params.queryParams.intgrValInterval = intgrValInterval
      this.getList()
    },
    changeSort() {
      if (!this.params.ascs.length) {
        this.params.ascs = ['infoIntgrVal']
        this.params.descs = []
      } else {
        this.params.descs = ['infoIntgrVal']
        this.params.ascs = []
      }
      this.getList()
    },
    handleCurrentChange(val) {
      this.params.currentPageNum = val
      this.getList()
    },
    selectTag(item) {
      if (this.$refs[this.selectedTab + 'Tab'].editable) {
        this.$message.info('当前正在编辑，请保存或取消！')
        return
      }
      if (this.$refs[this.selectedTab + 'Tab'].clearForm) this.$refs[this.selectedTab + 'Tab'].clearForm()
      this.selectedTag = item
      this.selectedTab = 'basic'
      this.editForm.tagNm = item.tagNm
      if (this.$refs.basicTab) this.$refs.basicTab.clearForm()
      this.$nextTick(() => {
        this.$refs.basicTab.getDetail()
      })
    },
    beforeChange(aciveTab, oldTab) {
      if (this.$refs[oldTab + 'Tab'].editable) {
        this.$message.info('当前正在编辑，请保存或取消！')
        return false
      }
    },
    handleClickTab(tab) {
      this.$refs[tab.name + 'Tab'].getDetail()
    },
    updateSelect() {
      this.list.forEach(v => {
        if (v.tagId === this.selectedTag.tagId) {
          this.selectedTag.tagNm = v.tagNm
          this.editForm.tagNm = v.tagNm
          this.selectedTag.infoIntgrVal = v.infoIntgrVal
          this.selectedTag.intgrValInterval = v.intgrValInterval
        }
      })
    },
    toggleStatus() {
      if (this.tagStatus === 50) this.$refs.infoModifyDialog.showDialog()
      else this.changeStatus()
    },
    confirmModify(reason) {
      this.changeStatus(reason)
    },
    changeStatus(reason = '') {
      let status = this.tagStatus === 50 ? 0 : 1
      this.$ajax({
        url: this.$ajax.setUrl('ast/astDataAsset/updateAssetStatus'),
        method: 'post',
        data: this.$ajax.setData({
          assetId: this.selectedTag.tagId,
          status: status,
          modifyReason: reason
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$message.success(data.msg)
          this.tagStatus = status === 0 ? 70 : 50
          if (this.selectedTab != 'history' && this.$refs[this.selectedTab + 'Tab'].cancelEdit)
            this.$refs[this.selectedTab + 'Tab'].cancelEdit()
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    updateTagStatus(data) {
      this.tagStatus = data.tagStatus
      this.isModify = data.isModify
    },
    changeEdit(editable, tagNm) {
      if (!editable) {
        this.editForm.tagNm = tagNm
        this.selectedTag.tagNm = tagNm
      }
      this.editable = editable
    }
  }
}
</script>

<style lang="scss">
@import './information.scss';
</style>
